<template>
    <div class="mainCenter" style="position: relative;">
        
        <div class="search-box">
            <div>
                <el-input type="text" v-model="keyword" :placeholder="address.address"/>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button  @click="save">确定</el-button>
            </div>
            <div class="info">打卡地址:{{ address.address }}</div>
        </div>
        <div class="postionBanner">
            <div class="navPoint item" style="width: 100px;text-align: center;" @click="change=!change" v-show="searchResut.length>0">{{change?"合并":"展开"}}</div>
            <div  :class="change?'item none:':'none'" v-for="item in searchResut">
                <div @click="moveMap(item)">{{item.address}}</div>
            </div>
        </div>
        <div id="container"></div>
    </div>
</template>


<script lang="ts" setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity'
import { reactive, ref } from 'vue'
import { onMounted } from 'vue';
import Address from '../address.vue';
import { reqGetAddress, reqUpdateAddress } from '@/api/common';
import { elementConfirm } from '@/utils/alert';
const map = shallowRef<any>(null);
const address = reactive({
    mid:-1,
    longitude: 0,
    latitude: 0,
    address:'',
})
const change=ref<boolean>(true)
const searchResut=ref<any>([])
const keyword=ref<string>('')
let marker = ref<any>(null)
let placeSearch=ref<any>(null)
let geocoder=ref<any>(null)
const initMap = async () => {
    let AMap: any = await AMapLoader.load({ key: "38dbfde48043fe3eba2c000a4e3d6df2", version: "2.0", plugins: ['AMap.PlaceSearch'], })
    map.value = new AMap.Map("container", {  //设置地图容器id
        zoom: 15,           //初始化地图级别
        center: [address.longitude, address.latitude],
    })
    
    map.value!.on("click",getad)
}




const geocoderGet=async()=>{
    let AMap: any = await AMapLoader.load({ key: "38dbfde48043fe3eba2c000a4e3d6df2", version: "2.0", plugins: ['AMap.PlaceSearch'], })
    AMap.plugin('AMap.Geocoder',function(){})
     geocoder.value = new AMap.Geocoder()
}


const getad = (event: any) => {
    address.latitude = event.lnglat.lat
    address.longitude = event.lnglat.lng
    if(marker.value){
        updateMarker()
    }else{
        addMarker()
    }
}

const addMarker= async ()=>{
    let AMap: any = await AMapLoader.load({ key: "38dbfde48043fe3eba2c000a4e3d6df2", version: "2.0", plugins: ['AMap.PlaceSearch'], })
    marker.value=new AMap.Marker({
        position: [address.longitude, address.latitude]
    });
    marker.value.setMap(map.value);
}


const updateMarker=()=>{
    marker.value.setPosition([address.longitude, address.latitude])
    geocoder.value.getAddress([address.longitude, address.latitude],(status:any, result:any)=>{
            address.address=result.regeocode.formattedAddress;
            console.log(result);
            
    })
}

const save=()=>{
    elementConfirm().then(()=>{
        reqUpdateAddress(address).then(res=>{
            console.log(res);
        })
    })
}



const moveMap=(item:any)=>{
    console.log(item);
    map.value.setCenter([item.location.lng,item.location.lat])
    marker.value.setPosition([item.location.lng,item.location.lat])
    address.address=item.name
    address.longitude=item.location.lng
    address.latitude=item.location.lat
}


const getAddress=()=>{
    reqGetAddress().then(res=>{
        let info=res.data.data;
        address.mid=info.mid
        address.longitude=info.longitude
        address.latitude=info.latitude
        address.address=info.address
        initMap()
        addMarker()
    })
}


const search=async()=>{
      var keywords = keyword.value
      let AMap: any = await AMapLoader.load({ key:"38dbfde48043fe3eba2c000a4e3d6df2", version: "2.0", plugins: ['AMap.PlaceSearch'], })
      AMap.plugin('AMap.PlaceSearch', function(){
        var autoOptions = {
          city: '重庆'
        }
        var placeSearch = new AMap.PlaceSearch(autoOptions);
        placeSearch.search(keywords, function(status:any, result:any) {
          searchResut.value=result.poiList.pois 
        })
      })
    }




onMounted(() => {
    getAddress()
    geocoderGet()
})
</script>

<style scoped lang="scss">
#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 780px;
    position: relative;
}
.search-box{
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 15px;
    z-index: 100;
    .el-input{
        width: 400px;
    }
    .el-button{
        margin-left: 10px;
    }
    .info{
        margin-left: 10px;
    }
}

.none{
    display: none;
}
.postionBanner{
    top: 100px;
    border-radius: 15px;
    position: absolute;
    padding-left: 20px;
    z-index: 200;
    .item{
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 10px;
        cursor: pointer;
}
}
</style>